<template>
  <div class="wrap">
    <div class="wrap-table">
      <!-- <BaseTitle title="用户列表" /> -->
      <a-table
        :loading="loading"
        :dataSource="data"
        :columns="columns"
        size="small"
        @change="handleTableChange"
        width="300"
        :pagination="pagination"
      >
        <template #title>
          <div style="width: 100%; display: flex; padding: 0 8px 8px 8px">
            <span style="align-self: center">库存产品</span>

            <div style="display: flex; flex: 1; justify-content: flex-end; align-self: center">
              <a-input
                v-model:value="recordSo.keyword"
                style="width: 180px; margin-right: 8px"
                placeholder="输入产品关键字查询"
                allow-clear
                @pressEnter="handleSearch"
              >
                <template #prefix>
                  <SearchOutlined style="color: #666" />
                </template>
              </a-input>

              <a-button type="primary" @click="handleSearch">查询</a-button>
            </div>
          </div>
        </template>
        <template #bodyCell="{ column, record }">
          <template v-if="column.key === 'productName'">
            <a-tag color="#f50" v-if="record.afloatStatus === 1">途</a-tag>
            {{ record.productName }}
          </template>
          <template v-if="column.key === 'operation'">
            <a-button
              class="button-interval"
              type="link"
              size="small"
              @click="emit('addProduct', record)"
            >
              加购
            </a-button>
          </template>
        </template>
      </a-table>
    </div>
  </div>
</template>
<script lang="ts" setup>
  import { defineExpose } from 'vue'

  import { ref, computed, reactive, onMounted } from 'vue'
  import { pageProduct } from '/@/api/product'
  import { ProductSo, ProductVO } from '/@/api/product/model/productModel'
  import { BasicQueryModel } from '/@/api/model/baseModel'
  import { SearchOutlined } from '@ant-design/icons-vue'
  // const props = defineProps({
  //   key: {
  //     type: number,
  //     required: true,
  //   },
  // })
  const emit = defineEmits(['addProduct'])

  const loading = ref(false)

  const columns = [
    {
      title: '产品名称',
      dataIndex: 'productName',
      key: 'productName',
      align: 'center',
    },
    {
      title: '有效期',
      dataIndex: 'limitTime',
      key: 'limitTime',
      align: 'center',
      width: 160,
    },
    {
      title: '库存数量',
      dataIndex: 'storeNum',
      key: 'storeNum',
      align: 'center',
      width: 160,
    },
    {
      title: '操作',
      dataIndex: 'operation',
      key: 'operation',
      align: 'center',
      width: 180,
    },
  ]

  let data = ref<ProductVO[]>([])
  const pagination = ref({
    total: 0,
    current: 1,
    pageSize: 4,
    size: '',
    showSizeChanger: false,
    showQuickJumper: false,
  })
  const pageParam = computed(() => ({
    query: recordSo,
    current: pagination.value?.current,
    size: pagination.value?.pageSize,
  }))
  let recordSo = reactive<ProductSo>({
    keyword: '',
    sortField: '',
    sortType: '',
    afloatStatus: '',
  })
  onMounted(() => {
    list()
  })

  const list = async () => {
    console.log('子组件重新加载数据啦')
    loading.value = true
    const res = await pageProduct(pageParam.value)
    data.value = res.records
    pagination.value.total = Number(res.total)
    pagination.value.current = Number(res.current)
    loading.value = false
  }

  function handleTableChange(page) {
    pagination.value.current = page.current
    list()
  }
  const handleSearch = () => {
    pagination.value.current = 1
    list()
  }
  const setCurrentPage = (current) => {
    pageParam.value.current = current
  }
  defineExpose({
    list,
    setCurrentPage,
  })
</script>

<style lang="scss" scoped>
  .wrap {
    margin: 0;
    padding: 0;
    &-table {
    }
  }
  :deep(.ant-table-title) {
    padding: 0px 8px 8px 8px !important;
  }
</style>
